<template>
  <!-- 数据字典 -->
  <div class="data-dict-container">
    <el-row>
      <!-- 左侧树 -->
      <el-col :span="4">
        <div class="data-dict-tree">
          <el-scrollbar style="height: 100%">
            <el-tree :data="treeData" :props="defaultProps" />
          </el-scrollbar>
        </div>
      </el-col>
      <!-- 右侧表单 -->
      <el-col :span="18">
        <div class="data-dict-form">
          <el-form :model="form" label-width="120px">
            <el-form-item label="字典名称">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useForm } from './hooks/useForm';
import { useTree } from './hooks/useTree';

const { treeData, defaultProps } = useTree();
const { form } = useForm();
</script>
